组件实战：Icon图标组件

Icon 图标组件是非常常用的组件。

它用起来非常简单，只要复制图标的组件名，直接渲染即可：

它也有一些 props：

spin 是让图标不断转圈：

rotate 是指定图标旋转角度：

antd 内置了很多图标组件，如果觉得不够用，还可以自己扩展：

import React from "react";
import Icon from "@ant-design/icons";
import type { GetProps } from "antd";

type CustomIconComponentProps = GetProps<typeof Icon>;

const HeartSvg = () => (
    <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
        <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
    </svg>
);

const HeartIcon = (props: Partial<CustomIconComponentProps>) => (
    <Icon component={HeartSvg} {...props} />
);

const App: React.FC = () => <HeartIcon style={{ color: "pink" }} />;

export default App;

只要对 Icon 组件包一层，component 参数传入图标的 svg，那就是一个新的图标组件。

而且如果你的项目用了 iconfont，你也可以把 iconfont 图标封装成 Icon 组件：

import React from "react";
import { createFromIconfontCN } from "@ant-design/icons";
import { Space } from "antd";

const IconFont = createFromIconfontCN({
    scriptUrl: "//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js",
});

const App: React.FC = () => (
    <Space>
        <IconFont type="icon-tuichu" />
        <IconFont type="icon-facebook" />
        <IconFont type="icon-twitter" />
    </Space>
);

export default App;

用 createFromIconfontCN 的方法，传入 scriptUrl，就可以直接用 IconFont 的组建了。

Icon 组件就这么多用法，还是挺简单的。

接下来我们自己实现一下：

npx create-react-app --template=typescript icon-component

用 cra 创建个项目。

添加 Icon/index.tsx

import React, { PropsWithChildren, forwardRef } from "react";

type BaseIconProps = {
    className?: string;
    style?: React.CSSProperties;
    size?: string | string[];
    spin?: boolean;
};

export type IconProps = BaseIconProps &
    Omit<React.SVGAttributes<SVGElement>, keyof BaseIconProps>;

export const Icon = forwardRef<SVGSVGElement, PropsWithChildren<IconProps>>(
    (props, ref) => {
        const {
            style,
            className,
            spin,
            size = "1em",
            children,
            ...rest
        } = props;

        return (
            <svg ref={ref} style={style} fill="currentColor" {...rest}>
                {children}
            </svg>
        );
    }
);

这里有 style、className、spin、size、children 这些参数，都很好理解。

此外，因为 Icon 就是对 svg 的封装，所以我们也接受所有 svg 的属性，透传给内部的 svg。

这里还用了 forwardRef 来把 svg 的 ref 转发出去：

还有，size 默认为 1em 也就是用 font-size 的大小：

填充颜色用 currentColor，也就是 color 的值：

这就是为什么我们能通过 font-size 和 color 来修改 Icon 组件的大小和颜色。

然后处理下 size 参数：

size 可以传 [10px, 10px] 分别指定宽高，也可以传 10px 来同时指定宽高，所以要做下处理。

import React, { PropsWithChildren, forwardRef } from "react";

type BaseIconProps = {
    className?: string;
    style?: React.CSSProperties;
    size?: string | string[];
    spin?: boolean;
};

export type IconProps = BaseIconProps &
    Omit<React.SVGAttributes<SVGElement>, keyof BaseIconProps>;

export const getSize = (size: IconProps["size"]) => {
    if (Array.isArray(size) && size.length === 2) {
        return size as string[];
    }

    const width = (size as string) || "1em";
    const height = (size as string) || "1em";

    return [width, height];
};

export const Icon = forwardRef<SVGSVGElement, PropsWithChildren<IconProps>>(
    (props, ref) => {
        const {
            style,
            className,
            spin,
            size = "1em",
            children,
            ...rest
        } = props;

        const [width, height] = getSize(size);

        return (
            <svg
                ref={ref}
                style={style}
                width={width}
                height={height}
                fill="currentColor"
                {...rest}>
                {children}
            </svg>
        );
    }
);

然后再处理下 className。

安装用到的包：

npm install --save classnames

const cn = cs(
    "icon",
    {
        "icon-spin": spin,
    },
    className
);

实现下 icon-spin 的样式：

安装 sass 包：

npm install --save-dev sass

添加 Icon/index.scss

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.icon {
    display: inline-block;
}

.icon-spin {
    animation: spin 1s linear infinite;
}

icon 设置为 inline-block，也就是行内元素但是可以设置宽高。

icon-spin 执行无限旋转动画。

在 Icon/index.tsx 里引入：

至此，Icon 组件就封装完了。

这就完了么？

没错，Icon 组件就这么简单。

然后创建 Icon/createIcon.tsx

import React, { forwardRef } from "react";
import { Icon, IconProps } from ".";

interface CreateIconOptions {
    content: React.ReactNode;
    iconProps?: IconProps;
    viewBox?: string;
}

export function createIcon(options: CreateIconOptions) {
    const { content, iconProps = {}, viewBox = "0 0 1024 1024" } = options;

    return forwardRef<SVGSVGElement, IconProps>((props, ref) => {
        return (
            <Icon ref={ref} viewBox={viewBox} {...iconProps} {...props}>
                {content}
            </Icon>
        );
    });
}

它是用来创建 Icon 组件的，接收 svg 的内容，也可以设置一些 IconProps、fill 颜色等。

接下来用它创建几个 Icon 组件试试：

Icon/icons/IconAdd.tsx

import { createIcon } from "../createIcon";

export const IconAdd = createIcon({
    content: (
        <>
            <path d="M853.333333 480H544V170.666667c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v309.333333H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h309.333333V853.333333c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V544H853.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z"></path>
        </>
    ),
});

Icon/icons/IconEmail.tsx

import { createIcon } from "../createIcon";

export const IconEmail = createIcon({
    content: (
        <>
            <path d="M874.666667 181.333333H149.333333c-40.533333 0-74.666667 34.133333-74.666666 74.666667v512c0 40.533333 34.133333 74.666667 74.666666 74.666667h725.333334c40.533333 0 74.666667-34.133333 74.666666-74.666667V256c0-40.533333-34.133333-74.666667-74.666666-74.666667z m-725.333334 64h725.333334c6.4 0 10.666667 4.266667 10.666666 10.666667v25.6L512 516.266667l-373.333333-234.666667V256c0-6.4 4.266667-10.666667 10.666666-10.666667z m725.333334 533.333334H149.333333c-6.4 0-10.666667-4.266667-10.666666-10.666667V356.266667l356.266666 224c4.266667 4.266667 10.666667 4.266667 17.066667 4.266666s12.8-2.133333 17.066667-4.266666l356.266666-224V768c0 6.4-4.266667 10.666667-10.666666 10.666667z"></path>
        </>
    ),
});

在 App.tsx 里引入下试试：

import { IconAdd } from "./Icon/icons/IconAdd";
import { IconEmail } from "./Icon/icons/IconEmail";

function App() {
    return (
        <div style={{ padding: "50px" }}>
            <IconAdd></IconAdd>
            <IconEmail></IconEmail>
        </div>
    );
}

export default App;

跑下开发服务：

npm run start

可以看到，Icon 渲染出来了：

然后试下 props：

import { IconAdd } from "./Icon/icons/IconAdd";
import { IconEmail } from "./Icon/icons/IconEmail";

function App() {
    return (
        <div style={{ padding: "50px" }}>
            <IconAdd size="40px"></IconAdd>
            <IconEmail spin></IconEmail>
            <IconEmail style={{ color: "blue", fontSize: "50px" }}></IconEmail>
        </div>
    );
}

export default App;

没啥问题。

接下来支持下 iconfont 的图标：

创建 Icon/createFrontIconfont.tsx

import React from "react";
import { Icon, IconProps } from "./";

const loadedSet = new Set<string>();

export function createFromIconfont(scriptUrl: string) {
    if (
        typeof scriptUrl === "string" &&
        scriptUrl.length &&
        !loadedSet.has(scriptUrl)
    ) {
        const script = document.createElement("script");
        script.setAttribute("src", scriptUrl);
        script.setAttribute("data-namespace", scriptUrl);
        document.body.appendChild(script);

        loadedSet.add(scriptUrl);
    }

    const Iconfont = React.forwardRef<SVGSVGElement, IconProps>(
        (props, ref) => {
            const { type, ...rest } = props;

            return (
                <Icon {...rest} ref={ref}>
                    {type ? <use xlinkHref={`#${type}`} /> : null}
                </Icon>
            );
        }
    );

    return Iconfont;
}

createFromIconfont 会传入 scriptUrl，我们在 document.body 上添加 <script> 标签引入它。

当然，如果加载过的就不用再次加载了，所以用 Set 来记录下。

然后用的时候使用 <use xlinkHref="#type" > 引用。

antd 的就是这么做的：

我们测试下：

选几个图标:

添加到购物车，创建个项目：

然后就可以看到在线 js 链接：

我们在项目里引入下试试：

import { createFromIconfont } from "./Icon/createFrontIconfont";
import { IconAdd } from "./Icon/icons/IconAdd";
import { IconEmail } from "./Icon/icons/IconEmail";

const IconFont = createFromIconfont(
    "//at.alicdn.com/t/c/font_4443338_a2wwqhorbk4.js"
);

function App() {
    return (
        <div>
            <div style={{ padding: "50px" }}>
                <IconFont type="icon-shouye-zhihui" size="40px"></IconFont>
                <IconFont
                    type="icon-gerenzhongxin-zhihui"
                    fill="blue"
                    size="40px"></IconFont>
            </div>
        </div>
    );
}

export default App;

引入成功！

至此，我们的 Icon 组件就开发完成了。

案例代码上传了小册仓库。

总结

这节我们实现了 Icon 组件。

支持 size、spin、className、style 等参数。

然后实现了 createIcon 方法，可以传入 svg 内容来生成具体的 Icon。

并且对 iconfont 做了支持，实现了 createIconFromIconfont，可以传入 scriptUrl，然后指定 type 来引用对应的 icon。

通过把 svg 的 fill 设置为 currentColor，把 width、height 设置为 1em，实现了可以通过 color 和 font-size 来设置 Icon 大小和颜色的效果。

这就是我们每天在用的 Icon 组件的实现原理。

总结​

总结